<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Collapse 折叠面板</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<script src="../static/js/icons-vue.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style type="text/css">
.span-title{
	font-weight: bold;
	font-size: 16px;
	margin-right: 6px;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">可同时展开多个面板，面板之间不影响</p>
	<div class="demo-collapse">
		<el-collapse v-model="activeNames1" @change="handleChange">
			<el-collapse-item :title="arr_content[0]['title']" name="0"><div v-html="arr_content[0]['content']"></div></el-collapse-item>
			<el-collapse-item :title="arr_content[1]['title']" name="1"><div v-html="arr_content[1]['content']"></div></el-collapse-item>
			<el-collapse-item :title="arr_content[2]['title']" name="2"><div v-html="arr_content[2]['content']"></div></el-collapse-item>
			<el-collapse-item :title="arr_content[3]['title']" name="3"><div v-html="arr_content[3]['content']"></div></el-collapse-item>
		</el-collapse>
	</div>
	
	<el-divider content-position="left">手风琴效果</el-divider><!-- =============================================================== -->
	<p class="desc">每次只能展开一个面板</p>
	<p class="desc">通过 accordion 属性来设置是否以手风琴模式显示。</p>
	<div class="demo-collapse">
		<el-collapse v-model="activeNames2" accordion @change="handleChange">
			<el-collapse-item :title="arr_content[0]['title']" name="0"><div v-html="arr_content[0]['content']"></div></el-collapse-item>
			<el-collapse-item :title="arr_content[1]['title']" name="1"><div v-html="arr_content[1]['content']"></div></el-collapse-item>
			<el-collapse-item :title="arr_content[2]['title']" name="2"><div v-html="arr_content[2]['content']"></div></el-collapse-item>
			<el-collapse-item :title="arr_content[3]['title']" name="3"><div v-html="arr_content[3]['content']"></div></el-collapse-item>
		</el-collapse>
	</div>
	<p class="desc" style="color: red;">循环写法：</p>
	<div class="demo-collapse">
		<el-collapse v-model="activeNames2_2" accordion @change="handleChange">
			<el-collapse-item v-for="(v,i) in arr_content" :title="v['title']" :name="String(i)"><div v-html="v['content']"></div></el-collapse-item>
		</el-collapse>
	</div>
	
	<el-divider content-position="left">自定义面板标题</el-divider><!-- =============================================================== -->
	<p class="desc">除了可以通过 title 属性以外，还可以通过具名 slot 来实现自定义面板的标题内容，以实现增加图标等效果。</p>
	<div class="demo-collapse">
		<el-collapse v-model="activeNames3" accordion @change="handleChange">
			<el-collapse-item name="0">
				<template #title>
					<span class="span-title">{{arr_content[0]['title']}}</span>
					<el-icon class="header-icon"><info-filled></info-filled></el-icon>
				</template>
				<div v-html="arr_content[0]['content']"></div>
			</el-collapse-item>
			<el-collapse-item :title="arr_content[1]['title']" name="1"><div v-html="arr_content[1]['content']"></div></el-collapse-item>
			<el-collapse-item :title="arr_content[2]['title']" name="2"><div v-html="arr_content[2]['content']"></div></el-collapse-item>
			<el-collapse-item :title="arr_content[3]['title']" name="3"><div v-html="arr_content[3]['content']"></div></el-collapse-item>
		</el-collapse>
	</div>
	
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			arr_content: [
				{title: '一致性', content: "与现实生活一致：符合现实生活的过程和逻辑并遵守用户习惯的语言和习惯<br>接口内一致：所有元素都应一致，例如：设计风格、图标和文本、元素位置等。"},
				{title: '反馈', content: "操作反馈：使用户能够清晰地感知，通过样式更新和交互效果进行操作；<br>视觉反馈：通过更新或重新排列来反映当前状态页面的元素。"},
				{title: '效率', content: "简化流程：保持操作流程简单直观；<br>明确明确：明确表达你的意图，用户可以快速理解并做出决策；<br>易于识别：界面应该简单明了，这有助于，用户可以识别并从记忆和回忆中解放出来。"},
				{title: '可控性', content: "决策：提供关于运营的建议是可以接受的，但要做到不为用户做出决策；<br>受控后果：用户应有权操作，包括取消、中止或终止电流活动"},
			],
			activeNames1: ['1'],
			activeNames2: '0',
			activeNames2_2: '1',
			activeNames3: '2',
		}
	},
	methods:{
		fn(){
			this.message = "欢迎来到HTML中文网。";
		},
		handleChange(val){
			console.log(val);
		},
	}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>